<template>
    <view class="bg-[#F8F9FB] min-h-[100vh]">
        <up-navbar title="钱包" :safeAreaInsetTop="true" bgColor="#fff" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback" color="#000"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome" color="#000"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="TOPBOX">
            <view class="pt-[30rpx] pb-[24rpx]">
                <view class="flex items-start mb-[10rpx] ">
                    <view class="text-[26rpx] text-[#fff] font-normal">当前余额</view>
                    <!-- <view class="py-[4rpx] px-[28rpx] rounded-[16rpx] bg-[#8CBBF8] text-[#fff] text-[30rpx] font-normal">提现</view> -->
                </view>
                <view class="text-[#fff] text-[48rpx] font-bold">{{ Info.amount }}</view>
            </view>
            <up-line direction="row" color="#fff"></up-line>
            <view class="flex items-center py-[30rpx]">
                <view class="flex-1">
                    <view class="text-[26rpx] text-[#fff] font-normal mb-[20rpx]">免单余额</view>
                    <view class="text-[32rpx] text-[#fff] font-normal">{{ Info.RebateBalance }}</view>
                </view>
                <view class="flex-1">
                    <view class="text-[26rpx] text-[#fff] font-normal mb-[20rpx]">消费补助金</view>
                    <view class="text-[32rpx] text-[#fff] font-normal">{{ Info.TenementBalance }}</view>
                </view>
            </view>
        </view>
        <view class="bg-[#fff] rounded-[8rpx] mx-[30rpx]">
            <view class="px-[24rpx] py-[28rpx] flex justify-between items-center">
                <view class="text-[36rpx] text-[#1B2128] font-normal">邀请列表</view>
                <view class="flex">
                    <view :class="current == index ? 'active' : ''" v-for="(item,index) in tabList" :key="index" @click="checkItem(index)" class="px-[16rpx] py-[8rpx] bg-[#F7F8FA] text-[24rpx] text-[#666] font-normal">{{ item.name }}</view>
                </view>
            </view>
            <up-line color="#E2E2E2"></up-line>
            <template v-for="(item,index) in List" :key="index">
                <view class="mx-[24rpx] flex justify-between items-center py-[24rpx]">
                    <view>
                        <view class="text-[28rpx] text-[#1B2128] font-normal mb-[16rpx]">{{ statusType(item.resource) }}</view>
                        <view class="text-[#999] text-[24rpx] font-normal">{{ item.createTime }}</view>
                    </view>
                    <view class="flex items-center">
                        <view class="text-[#999] text-[24rpx] font-normal">提现至余额：</view>
                        <view class="text-[#5578F3] text-[24rpx] font-normal">+{{ item.amount }}</view>
                    </view>
                </view>
                <up-line color="#E2E2E2"></up-line>
            </template>
        </view>
    </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { balancePage, GetAllMoneyType } from '../../API/ReceivingHall'
const { goback , gohome } = useTab()
const { Info , getInfo , getList , List , num , statusType } = useInfo()
const { tabList , checkItem , current } = useCheck()
function useTab(){
    const goback = () => {
        uni.navigateBack();
    }
    const gohome = () => {
        uni.switchTab({
            url: '/pages/index/index'
        })
    }
    return { goback , gohome }
}
function useCheck(){
    const current = ref(0)
    const tabList = ref([
        {
            name:'收入明细'
        },{
            name:'提现明细'
        }
    ])
    const checkItem = (index)=>{
        current.value = index
    }
    return {
        tabList,
        checkItem,
        current
    }
}
function useInfo(){
    const Info = ref({})
    const pageObj = reactive({
        pageNum:1,
        pageSize:10
    })
    const List = ref([])
    const num = ref(0)
    const getInfo = async ()=>{
        let {data} = await GetAllMoneyType()
        Info.value = data
    }
    const getList = async ()=>{
        let { rows , total } = await balancePage(pageObj)
        List.value = rows
        num.value = total
    }
    const statusType = computed(()=>(type)=>{
        return type == 1 ? '邀请收益' : type==4 ? '物业基金' : type==5 ? '排队免单' : '骑手收益'
    })
    return { Info , getInfo , getList , List , num , statusType }
}
onLoad(async()=>{
    await getInfo()
    await getList()
})
</script>

<style lang="scss" scoped>
.TOPBOX{
    margin: 30rpx;
    padding: 0 30rpx;
    border-radius: 8rpx;
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
.active{
    color:#69A7F6;
    background: linear-gradient( 90deg, rgba(85, 120, 243,0.3) 0%, rgba(105, 167, 246,0.3) 100%);
}
</style>